<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <!-- Bootstrap 的 CSS 文件 -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
      integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
      crossorigin="anonymous"
    />

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- style css -->
    <link rel="stylesheet" href="css/style.css">
    <!-- Responsive-->
    <link rel="stylesheet" href="css/responsive.css">
    <!-- fevicon -->
    <link rel="icon" href="images/fevicon.png" type="image/gif" />
    <!-- Scrollbar Custom CSS -->
    <link rel="stylesheet" href="css/jquery.mCustomScrollbar.min.css">
    <!-- Tweaks for older IEs-->
    <link rel="stylesheet" href="css/font-awesome.css">
    <link rel="stylesheet" href="css/jquery.fancybox.min.css" media="screen">
    <link rel="stylesheet" href="css/index.css" />
    <title>北恒信箱</title>
  </head>

  <body>
    <div class="container">
      <div class="row">
        <header class="col-md-2">
          <div class="logo">
            <a href="#"><img src="./images/logo.png" alt="" class="hidden-xs" /></a>
          </div>
          <div class="nav">
            <ul>
              <li>
                <a href="#"><img src="./bootstrap/fonts/小程序.png" alt="" />小程序</a>
              </li>
              <li>
                <a href="#"><img src="./bootstrap/fonts/Vue.png" alt="" />vue.js</a>
              </li>
              <li>
                <a href="#"><img src="./bootstrap/fonts/Jquery.png" alt="" />Jquery</a>
              </li>
              <li>
                <a href="#"><img src="./bootstrap/fonts/h5.png" alt="" />Html5</a>
              </li>
              <li>
                <a href="#"><img src="./bootstrap/fonts/css3.png" alt="" />CSS3</a>
              </li>
              <li>
                <a href="#"><img src="./bootstrap/fonts/Bootstrap.png" alt="" />Bootstrap</a>
              </li>
              <li>
                <a href="#"><img src="./bootstrap/fonts/React.png" alt="" />React</a>
              </li>
            </ul>
          </div>
        </header>
        <article class="col-md-7">
          <!-- 新闻 -->
          <div class="news clearfix">
            <ul>
              <li>
                <a href="">
                  <img src="https://yqfile.alicdn.com/5d18def29ca23cb46b0ca5bbe166d3b69fff1956.jpeg" alt="" />
                  <p>Bootstrap4 网格系统</p>
                </a>
              </li>
              <li>
                <a href="">
                  <img
                    src="https://th.bing.com/th/id/Rd860648c5fb2959110a39214f8399680?rik=piSIM0tgOku7zg&riu=http%3a%2f%2fwx2.sinaimg.cn%2fbmiddle%2f9150e4e5gy1gb5ol01pj8j205i04ymwz.jpg&ehk=ViTCJ2A8WkDWQi2fNuJU%2fuwmjKQyzTpO%2bPfIGTeU0pA%3d&risl=&pid=ImgRaw"
                    alt=""
                  />
                  <p>Bootstrap4 文字排版</p>
                </a>
              </li>
              <li>
                <a href="">
                  <img
                    src="https://th.bing.com/th/id/Rd860648c5fb2959110a39214f8399680?rik=piSIM0tgOku7zg&riu=http%3a%2f%2fwx2.sinaimg.cn%2fbmiddle%2f9150e4e5gy1gb5ol01pj8j205i04ymwz.jpg&ehk=ViTCJ2A8WkDWQi2fNuJU%2fuwmjKQyzTpO%2bPfIGTeU0pA%3d&risl=&pid=ImgRaw"
                    alt=""
                  />
                  <p>Bootstrap4 颜色</p>
                </a>
              </li>
              <li>
                <a href="">
                  <img
                    src="https://th.bing.com/th/id/Rd860648c5fb2959110a39214f8399680?rik=piSIM0tgOku7zg&riu=http%3a%2f%2fwx2.sinaimg.cn%2fbmiddle%2f9150e4e5gy1gb5ol01pj8j205i04ymwz.jpg&ehk=ViTCJ2A8WkDWQi2fNuJU%2fuwmjKQyzTpO%2bPfIGTeU0pA%3d&risl=&pid=ImgRaw"
                    alt=""
                  />
                  <p>Bootstrap4 表格</p>
                </a>
              </li>
              <li>
                <a href="">
                  <img
                    src="https://th.bing.com/th/id/Rd860648c5fb2959110a39214f8399680?rik=piSIM0tgOku7zg&riu=http%3a%2f%2fwx2.sinaimg.cn%2fbmiddle%2f9150e4e5gy1gb5ol01pj8j205i04ymwz.jpg&ehk=ViTCJ2A8WkDWQi2fNuJU%2fuwmjKQyzTpO%2bPfIGTeU0pA%3d&risl=&pid=ImgRaw"
                    alt=""
                  />
                  <p>Bootstrap4 按钮</p>
                </a>
              </li>
            </ul>
          </div>
          <!-- 发表 -->
          <div class="publish">
            <div class="row">
              <div class="col-sm-9">
                <h3>一个简单的 Bootstrap 模板</h3>
                <p class="text-muted">yyyy-mm-dd</p>
                <p>确保你的页面遵循了最新的设计和开发标准。 这意味着使用HTML5 doctype 并包含 viewport 以获得正确的响应行为</p>
                <p class="text-muted">阅读(1)评论(1)赞(1)踩(1)</p>
              </div>
              <div class="col-sm-3 pic">
                <img src="./images/pic1.png" alt="" />
              </div>
            </div>
            <div class="row">
              <div class="col-sm-9">
                <h3>重要的全局设定</h3>
                <p class="text-muted">yyyy-mm-dd</p>
                <p>Bootstrap 使用了一些重要的全局样式和设置，使用它们时需要注意，所有这些样式和设置几乎都有专门针对跨浏览器样式的规范</p>
                <p class="text-muted">阅读(1)评论(1)赞(1)踩(1)</p>
              </div>
              <div class="col-sm-3 pic">
                <img src="./images/pic2.png" alt="" />
              </div>
            </div>
            <div class="row">
              <div class="col-sm-9">
                <h3>Bootstrap4 网格系统</h3>
                <p class="text-muted">yyyy-mm-dd</p>
                <p>虽然Bootstrap使用ems或rems来定义大多数大小但px用于栅格断点和容器宽度,这是因为viewport宽度以像素为单位,并且不随字体大小而变化</p>
                <p class="text-muted">阅读(1)评论(1)赞(1)踩(1)</p>
              </div>
              <div class="col-sm-3 pic">
                <img src="./images/pic3.png" alt="" />
              </div>
            </div>
            <div class="row">
              <div class="col-sm-9">
                <h3>响应式图片</h3>
                <p class="text-muted">yyyy-mm-dd</p>
                <p>Bootstrap中，给图片添加 .img-fluid类,这样它就变成了一张响应式设计的图片。另外添加 max-width: 100%; 和height: auto; 可以让图片根据父元素的大小进行等比例缩放</p>
                <p class="text-muted">阅读(1)评论(1)赞(1)踩(1)</p>
              </div>
              <div class="col-sm-3 pic">
                <img src="./images/pic4.png" alt="" />
              </div>
            </div>
            <div class="row">
              <div class="col-sm-9">
                <h3>按钮</h3>
                <p class="text-muted">yyyy-mm-dd</p>
                <p>使用Bootstrap 自定义按钮样式到表单、对话框等操作，并支持多种按钮大小、状态等。</p>
                <p class="text-muted">阅读(1)评论(1)赞(1)踩(1)</p>
              </div>
              <div class="col-sm-3 pic">
                <img src="./images/pic5.png" alt="" />
              </div>
            </div>
          </div>
        </article>
        <aside class="col-md-3">
          <a href="#" class="banner">
            <img src="./images/www.jfif" alt="" />
          </a>
          <a href="#" class="hot">
            <span class="btn btn-success">国际化</span>
            <h4>网络无国界</h4>
            <p>With the Internet follows an absolute requirement to interchange data in a multiplicity of languages, which in turn utilize a bewildering number of characters.</p>
          </a>
        </aside>
      </div>
      <div class="copyright">
        <div class="container">
          <div class="row">
            <div class="col-md-12">
              <p>© 2023 All Rights Reserved. <a href="https://beian.miit.gov.cn">豫ICP备2023005587号-2</a></p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- JavaScript 文件是可选的。从以下两种建议中选择一个即可！ -->

    <!-- 选项 1：jQuery 和 Bootstrap 集成包（集成了 Popper） -->
    <script
      src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-LCPyFKQyML7mqtS+4XytolfqyqSlcbB3bvDuH9vX2sdQMxRonb/M3b9EmhCNNNrV"
      crossorigin="anonymous"
    ></script>
  </body>
</html>
